{% if latest_question_list %}
    <div class="container py-5">
        <!-- 管理员入口 - 更精致的浮动按钮 -->
        <div class="admin-float">
            <a href="/admin" class="btn btn-admin" title="管理员后台">
                <i class="bi bi-shield-lock"></i>
            </a>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <!-- 更精致的标题区域 -->
                <div class="text-center mb-5">
                    <div class="title-icon mb-3">
                        <i class="bi bi-bar-chart-steps"></i>
                    </div>
                    <h2 class="text-gradient mb-2">最新投票</h2>
                    <p class="text-muted subheading">选择您感兴趣的议题参与投票</p>
                </div>
                
                <!-- 投票列表容器 -->
                <div class="voting-list">
                    {% for question in latest_question_list %}
                    <div class="vote-item">
                        <a href="{% url 'polls:detail' question.id %}" class="text-decoration-none">
                            <div class="vote-content">
                                <div class="vote-text">
                                    <h5 class="vote-title">{{ question.question_text }}</h5>
                                    <div class="vote-meta">
                                        <span class="date-badge">
                                            <i class="bi bi-calendar3 me-1"></i>{{ question.pub_date|date:"Y-m-d" }}
                                        </span>
                                    </div>
                                </div>
                                <div class="vote-badge">
                                    <span class="option-count">
                                        <i class="bi bi-list-ul me-1"></i>{{ question.choice_set.count }} 选项
                                    </span>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="container py-5">
        <!-- 管理员入口 - 更精致的浮动按钮 -->
        <div class="admin-float">
            <a href="/admin" class="btn btn-admin" title="管理员后台">
                <i class="bi bi-shield-lock"></i>
            </a>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center py-5">
                <!-- 更精致的空状态设计 -->
                <div class="empty-state">
                    <div class="empty-icon mb-4">
                        <i class="bi bi-clipboard2-pulse"></i>
                    </div>
                    <h3 class="text-gradient mb-3">暂无投票内容</h3>
                    <p class="text-muted mb-4">当前没有可用的投票，您可以创建新的投票</p>
                    <a href="{% url 'polls:index' %}" class="btn btn-gradient">
                        <i class="bi bi-arrow-left-circle me-2"></i>返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<style>
    /* 基础样式 */
    body {
        background-color: #fafbff;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        color: #2d3748;
    }
    
    /* 渐变文字效果 */
    .text-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 700;
    }
    
    /* 标题图标 */
    .title-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
        border-radius: 50%;
    }
    .title-icon i {
        font-size: 1.75rem;
        color: #3b82f6;
    }
    
    /* 投票项设计 */
    .vote-item {
        background: white;
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.03);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .vote-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.2);
    }
    
    .vote-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .vote-title {
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }
    
    .vote-meta {
        font-size: 0.85rem;
    }
    
    .date-badge {
        background: rgba(203, 213, 225, 0.3);
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        color: #64748b;
    }
    
    .option-count {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
    }
    
    /* 空状态设计 */
    .empty-state {
        background: white;
        padding: 2.5rem;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .empty-icon {
        font-size: 3rem;
        color: #3b82f6;
        opacity: 0.8;
    }
    
    /* 渐变按钮 */
    .btn-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        color: white;
        border: none;
        padding: 0.5rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        color: white;
    }
    
    /* 管理员按钮 */
    .admin-float {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 100;
    }
    
    .btn-admin {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: white;
        color: #3b82f6;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-admin:hover {
        background: #3b82f6;
        color: white;
        transform: scale(1.1);
    }
    
    /* 副标题样式 */
    .subheading {
        letter-spacing: 0.5px;
        font-weight: 400;
        color: #64748b;
    }
</style>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">